/* 数据统计仪表板样式文件 */

/* 主容器样式 */
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* 顶部统计卡片容器样式 */
.statsContainer {
  display: flex;
  width: 100%;
  padding: 15px;
  background: #fff;
  margin-bottom: 15px;
  border-radius: 5px;
}

/* 单个统计卡片样式 */
.statItem {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  gap: 8px;
}

/* 统计卡片之间的分割线样式 */
.divider {
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background-color: #e8e8e8;
}

/* 统计卡片图标样式 */
.icon {
  width: 55px;
  height: 55px;
  vertical-align: middle;
}

/* 统计卡片标题样式 */
.title {
  font-size: 14px;
}

/* 统计卡片文字容器样式 */
.textContainer {
  display: flex;
  flex-direction: column;
}

/* 图表区域容器样式 */
.chartContainer {
  display: flex;
  width: 100%;
  gap: 12px;
  height: 300px;
  padding-bottom: 15px;
}

/* 单个图表卡片样式 */
.chartData {
  flex: 1;
  background-color: #fff;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 5px;
}

/* 图表标题样式 */
.chartTitle {
  font-size: 14px;
  margin-bottom: 10px;
  line-height: 20px;
}

/* 图表内容区域样式 */
.chartContent {
  height: 300px;
}

/* 数据展示区域容器样式（排名和轮播图） */
.statistics {
  display: flex;
  width: 100%;
  gap: 12px;
  height: 380px;
  padding-bottom: 15px;
}

/* 单个展示卡片容器样式 */
.exhibition {
  flex: 1;
  background-color: #fff;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 展示卡片标题栏样式 */
.showData {
  width: 100%;
  display: flex;
  height: 30px;
  justify-content: space-between;
  align-items: center;
  background: white;
  z-index: 20;
  position: sticky;
  top: 0;
  box-sizing: border-box;
}

/* 展示卡片主标题样式 */
.showData .demonstrate {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

/* 查看更多链接样式 */
.showData p {
  font-size: 14px;
  color: rgba(22, 93, 255, 1);
  margin: 0;
  cursor: pointer;
}

/* 查看更多链接悬停效果 */
.showData p:hover {
  text-decoration: underline;
}

/* 排名内容区域样式（可滚动容器） */
.rankingContent {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  /* 隐藏滚动条样式 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* 隐藏Webkit浏览器（Chrome, Safari, Opera）的滚动条 */
.rankingContent::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* 排名表格容器样式 */
.rankingTable {
  width: 100%;
  table-layout: fixed;
}

/* 排名表格样式 */
.rankTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

/* 排名表格表头固定样式 */
.rankTable thead {
  position: sticky;
  top: 0;
  z-index: 15;
}

/* 排名表格单元格通用样式 */
.rankTable th,
.rankTable td {
  padding: 10px 4px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 排名表格表头样式 */
.rankTable th {
  background-color: #F2F3F5;
  color: #333;
  font-weight: 500;
}

/* 排名表格行悬停效果 */
.rankTable tbody tr:hover {
  background-color: #f9f9f9;
}

/* 排名图标样式（1、2、3名奖牌图标） */
.rankIcon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

/* 名字单元格样式 */
.nameCell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

/* 学生头像样式 */
.studentAvatar {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 5%;
}

/* 名字文本容器样式 */
.nameText {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 排名单元格样式 */
.rankCell {
  text-align: center;
  vertical-align: middle;
}

/* 积分单元格样式 */
.scoreCell {
  text-align: center;
  vertical-align: middle;
}

/* 排名数字样式（4名及以后） */
.rankNumber {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  background-color: #f0f0f0;
  color: #666;
}

/* 暂无数据提示样式 */
.noData {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* 教师轮播图容器样式 */
.teacherCarousel {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 300px;
  margin-top: 10px;
  /* 隐藏轮播图滚动条 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* 隐藏轮播图Webkit滚动条 */
.teacherCarousel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* 教师图片样式 */
.teacherImage {
  width: 100%;
  height: 300px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: block;
}

/* 轮播图项样式 */
.carouselItem {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 头像列样式 */
.avatarColumn {
  width: 5px;
}

/* 学生名字列样式 */
.studentName {
  width: 75px;
}

/* 全局滚动条隐藏样式（可选） */

/* 隐藏整个页面的滚动条 */
.container::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* 隐藏图表容器的滚动条 */
.chartContainer::-webkit-scrollbar {
  display: none;
}

/* 隐藏统计卡片的滚动条 */
.statsContainer::-webkit-scrollbar {
  display: none;
}

/* 通用滚动条隐藏类（可复用） */
.scrollbar-hidden {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* 平滑滚动效果（可选） */
.rankingContent {
  scroll-behavior: smooth;
}

/* 触摸设备优化 */
.rankingContent {
  -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
}

/* 防止滚动条占用布局空间 */
.rankingContent {
  overflow: -moz-scrollbars-none;
}

/* 响应式设计：在小屏幕上完全隐藏滚动条 */
@media (max-width: 768px) {
  .rankingContent {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .rankingContent::-webkit-scrollbar {
    display: none;
  }
}